{extend name="layout:base" /}
{block name="page_content"}
  <form id="settings-form" class="form-horizontal" method="post">
    <div class="form-group">
      <label class="col-sm-3 control-label no-padding-right" for="form-field-1">
        QQ APPID：
      </label>
      <div class="col-sm-9">
        <input type="text" name="options[qq_appid]" id="qq_appid" value="{$options.qq_appid|default=''}"  placeholder="请输入QQ APPID" class="col-xs-10 col-sm-5" required/>
        <span class="lbl">&nbsp;&nbsp;
          <span class="red">*</span>必填
        </span>
        <span class="help-inline col-xs-12 col-sm-7">
          <span class="middle" id="resone"></span>
        </span>
      </div>
    </div>
    <div class="space-4"></div>

    <div class="form-group">
      <label class="col-sm-3 control-label no-padding-right" for="form-field-1">
        QQ APP KEY：
      </label>
      <div class="col-sm-9">
        <input type="text" name="options[qq_appkey]" id="qq_appkey" value="{$options.qq_appkey|default=''}" placeholder="请输入QQ APP KEY" class="col-xs-10 col-sm-5" required/>
        <span class="lbl">&nbsp;&nbsp;
          <span class="red">*</span>必填
        </span>
        <span class="help-inline col-xs-12 col-sm-7">
          <span class="middle" id="restwo"></span>
        </span>
      </div>
    </div>
    <div class="page-header form-group">
      <label class="col-sm-3 control-label no-padding-right"></label>
      <div class="col-sm-9">
        <a href="http://connect.qq.com/" target="_blank">点击此处</a>获取QQ互联APPID及APP KEY
      </div>
    </div>
    <div class="form-group">
      <label class="col-sm-3 control-label no-padding-right" for="form-field-1">
        新浪微博APPID：
      </label>
      <div class="col-sm-9">
        <input type="text" name="options[sina_appid]" id="sina_appid" value="{$options.sina_appid|default=''}"  placeholder="新浪微博APPID" class="col-xs-10 col-sm-5" required/>
        <span class="lbl">&nbsp;&nbsp;
          <span class="red">*</span>必填
        </span>
        <span class="help-inline col-xs-12 col-sm-7">
          <span class="middle" id="resthr"></span>
        </span>
      </div>
    </div>
    <div class="space-4"></div>

    <div class="form-group">
      <label class="col-sm-3 control-label no-padding-right" for="form-field-1">
        新浪微博 APP KEY：
      </label>
      <div class="col-sm-9">
        <input type="text" name="options[sina_appkey]" id="sina_appkey" value="{$options.sina_appkey|default=''}" placeholder="新浪微博 APP KEY" class="col-xs-10 col-sm-5" required/>
        <span class="lbl">&nbsp;&nbsp;
          <span class="red">*</span>必填
        </span>
        <span class="help-inline col-xs-12 col-sm-7">
          <span class="middle" id="resfour"></span>
        </span>
      </div>
    </div>
    <div class="form-group">
      <label class="col-sm-3 control-label no-padding-right"></label>
      <div class="col-sm-9">
        <a href="http://open.weibo.com/" target="_blank">点击此处</a>获取新浪微博互联APPID及APP KEY
      </div>
    </div>

    <div class="clearfix form-actions">
      <div class="col-sm-offset-3 col-sm-9">
        <button class="btn btn-info" type="submit">
          <i class="ace-icon fa fa-check bigger-110"></i>
          保存
        </button>

        &nbsp; &nbsp; &nbsp;
        <button class="btn" type="reset">
          <i class="ace-icon fa fa-undo bigger-110"></i>
          重置
        </button>
      </div>
    </div>
  </form>
{/block}
{block name="page_js"}
  <script src="{$site_root}/static/plugins/jquery-validate/jquery.validate.min.js"></script>
  <script type="text/javascript">
    $(document).ready(function(){
      $("form#settings-form").validate({
        rules:{
          "options[qq_appid]":{
            required: true,
            minlength: 3,
            maxlength: 60
          }, "options[qq_appkey]":{
            required: true,
            minlength: 3,
            maxlength: 60
          }, "options[sina_appid]":{
            required: true,
            minlength: 3,
            maxlength: 60
          }, "options[sina_appkey]":{
            required: true,
            minlength: 3,
            maxlength: 60
          }
        },
        messages:{
          "options[qq_appid]":{
            required: "QQ APP ID不能为空",
            minlength: "QQ APP ID格式不正确",
            maxlength: "QQ APP ID格式不正确"
          }, "options[qq_appkey]":{
            required: "QQ APP KEY不能为空",
            minlength: "QQ APP KEY格式不正确",
            maxlength: "QQ APP KEY格式不正确"
          }, "options[sina_appid]":{
            required: "SINA APP ID不能为空",
            minlength: "SINA APP ID格式不正确",
            maxlength: "SINA APP ID格式不正确"
          }, "options[sina_appkey]":{
            required: "SINA APP KEY不能为空",
            minlength: "SINA APP KEY格式不正确",
            maxlength: "SINA APP KEY格式不正确"
          }
        },
        errorClass: "help-inline input-error",
        errorElement: "span",
        highlight:function(element, errorClass, validClass) {
          $(element).parents('.form-group').addClass('has-error');
        },
        unhighlight: function(element, errorClass, validClass) {
          $(element).parents('.form-group').removeClass('has-error');
          // $(element).parents('.form-group').addClass('success');
        }
      });
    });
  </script>
{/block}